<!DOCTYPE html>
<html>
<head>
    <title>Cube</title>
	<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="js/observer/observer.js"></script>
	<script type="text/javascript" src="js/observer/observerlist.js"></script>
	<script type="text/javascript" src="js/point3D.js"></script>
	<script type="text/javascript" src="js/shape.js"></script>
	<script type="text/javascript" src="js/engine.js"></script>
	<script type="text/javascript" src="js/inputControls.js"></script>
	<script type="text/javascript" src="js/rotation.js"></script>
	<script type="text/javascript" src="js/models.js"></script>
	<script type="text/javascript" src="js/polygon.js"></script>
	<script type="text/javascript" src="js/vertices.js"></script>
	<script type="text/javascript" src="js/controller.js"></script>
	<script type="text/javascript" src="js/engine.search.js"></script>
	<script type="text/javascript" src="js/matrix/matrix.js"></script>
	<script type="text/javascript" src="js/Stats.js"></script>
	<script type="text/javascript" src="js/animation.js"></script>
	<script type="text/javascript" src="js/history.js"></script>
	<script type="text/javascript" src="js/player.js"></script>
	<script type="text/javascript" src="js/historyRecord.js"></script>
	
    <script type="text/javascript">
		window.onload = startDemo;
 
		var viewWidth = 400; 
		var viewHeight = 400; 
		var fov = 300; 
		var viewDistance = 15;
		var rotationSpeed =1;
		var refreshRate = 30;
		var axis_x = 0;
		var axis_y = 0;
		var axis_z = 0;
		
		var controller = new Controller();
		var vertices = new Vertices();
		var models = new Models();
		var engine = new PolygonEngine();
		
        function startDemo(){
        	
        	//TODO: remove stats
        	stats = new Stats();
			stats.domElement.style.position = 'absolute';
			stats.domElement.style.top = '10px';
			document.getElementById('statsMonitor').appendChild( stats.domElement );

			
			Inputs.setController(controller);
			
			controller.setInputs(Inputs);
			controller.setVertices(vertices);
			controller.setModels(models);
			
			models.setVertices(vertices);
			
			for( var i = 0; i < cubes.length; i++){
				models.add(cubes[i]);
			}
			
			for( var i = 0; i < models.total(); i++){
				vertices.loadModel(models.get(i));
			}

			if(!engine.initCanvas("thecanvas")){
				return;
			}
			engine.loadVertices(vertices.polygons);
			engine.setController(controller);
			controller.setEngine(engine);
			controller.startEngine();
        }
	</script>
</head>
<body>
	<div id="statsMonitor"></div>
    <canvas id="thecanvas" width="400" height="400" style="float:left;">
        Your browser does not support the HTML5 canvas element.
    </canvas>
    <div style="width:200px; height:400px; float:left; display:block; color:#333; font-family: arial,sans-serif; font-size:12px; text-shadow: 0 2px 6px #CCCCCC">
    	Disclaimer: No cubes were harmed during development.
    	<a href="#" onClick="controller.playHistory();">play</a>
    	<p>
		<span id="playerBackward" class="player">Back</span>
		<span id="playerPrev" class="player">Prev</span>	
		<span id="playerNext" class="player">Next</span>
		<span id="playerForward" class="player">Forward</span>
		</p>
    </div>
	
    </body>
</html>